<!--
 * @Author: Li Zengkun
 * @Date: 2022-07-25 17:21:31
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-08-12 11:46:41
 * @Description: Login-Page
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/login.css">
    <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css">
    <title>Login</title>
</head>

<body>
    <div class="logo">
        <img src="../img/logo.png" alt="">
    </div>
    <span id="tip" class="tip"></span>
    <form action="#">
        <input value="" id="username" name="name" type="text" placeholder="用户名">
        <input value="" id="password" name="password" type="text" placeholder="请输入密码">
        <button type="button" id="submit" class="submit btn">登录</button>
        <a href="#" class="forget-pwd">忘记密码？</a>
        <a href="./register.html" class="register">注册</a>
    </form>
    <div class="other-login">
        <div class="line"></div>
        <div class="line"></div>
        <div class="text">其他登陆方式</div>
        <a href="#">
            <i class="fa fa-weixin fa-2x" aria-hidden="true"></i> 微信
        </a>
        <a href="#">
            <i class="fa fa-qq fa-2x" aria-hidden="true"></i> QQ
        </a>
        <a href="#">
            <i class="fa fa-weibo fa-2x" aria-hidden="true"></i> 微博
        </a>
    </div>
</body>


<script>
    let oUsername = document.querySelector('#username')
    let oPassword = document.querySelector('#password')
    let oSubmit = document.querySelector('#submit')
    let oTip = document.querySelector('#tip')


    oSubmit.addEventListener('click', () => {
        // 提取value
        let username = oUsername.value
        let password = oPassword.value

        // 表单验证
        let passwordValid = /\d{3,}/.test(password)
        if (!passwordValid) {
            openTip('请填写正确用户名或密码')
            oUsername.classList.add('error')
            oPassword.classList.add('error')
            return
        } else {
            login(username, password)
        }
    })

    // 登录ajax
    function login(username, password) {
        let ajax = new XMLHttpRequest()
        ajax.open("POST", 'http://localhost:3002/user/login', true)
        ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        ajax.send(`username=${username.toString()}&password=${password.toString()}`)
        ajax.onreadystatechange = function() {
            if (this.readyState === 4) {
                let resp = JSON.parse(this.responseText)
                console.log(resp);
                // 提示

                // 登录失败
                openTip(resp.msg)
                if (!resp.status) {
                    oUsername.classList.add('error');
                    oPassword.classList.add('error');
                    return
                }
                // 登陆成功
                if (resp.status) {
                    oUsername.classList.add('success');
                    oPassword.classList.add('success');
                    if (resp.data.token) {
                        localStorage.setItem('token', resp.data.token)
                        window.location.href = './index.html'
                        return
                    }
                    return
                }
            }
        }
    }


    // 提示
    function openTip(text) {
        oTip.style.display = 'inline-block'
        oTip.innerText = text
        console.log(text);
        setTimeout(() => {
            oTip.style.display = 'none'
        }, 3000)
    }
</script>

</html>